<template>
    <div id="train-modal">
        <div class="item" v-for="(item, idx) in list" :key="item.label" @click="itemClick(item)">
            <img :src="getImageUrl(`train-${idx + 1}.png`, 'index')" alt="">
            <div class="label">{{ item.label }}</div>
            <div class="status" :class="[item.status == '1' ? 'error' : '']">{{ item.status == '1' ? '去填写' : '去查看' }}
            </div>
        </div>
    </div>
    <!-- <commonModal ref="myModal">
        <component :is="componentId"></component>
    </commonModal> -->
</template>

<script setup lang='ts'>
import { getImageUrl } from '@/assets/common';
// import MealsModal from './MealsModal.vue';

const emit = defineEmits(['itemClick']);
// const componentId = ref();
// const myModal = ref<typeof commonModal>(commonModal)
// status 0 已填写 去查看， 1， 去填写
import { useStore } from '@/store';
const store = useStore();
const { resumeInfo } = store as any
const list = ref([
    {
        label: "培训协议", url: "", status: "0", key: 'agreement'
    },
    {
        label: "饮食调查", url: "", status: "1", key: "meals"
    },
    {
        label: "报销说明", url: '', status: "0", key: 'refund'
    },
])
if (resumeInfo.notEat) {
    list.value[1].status = '0'
}
const itemClick = (item) => {
    emit('itemClick', item)
}
</script>

<style lang="scss" scoped>
#train-modal {
    width: 100%;
    height: 100%;
    background: #FFFFFF !important;
    border-radius: 3px 3px 3px 3px;
    display: flex;
    position: relative;
    z-index: 9;
    justify-content: space-around;
    align-items: center;
    height: 315px;

    .item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 130px;
        height: 147px;
        background: #F5F7FB;
        border-radius: 10px 10px 10px 10px;
        cursor: pointer;
        position: relative;

        img {
            width: 56px;
            height: 56px;
        }

        .label {
            font-weight: 500;
            font-size: 16px;
            color: #333333;
            line-height: 19px;
            margin-top: 18px;
        }

        .status {
            right: 0;
            top: 0;
            position: absolute;
            height: 23px;
            background: #209EE4;
            color: #fff;
            width: 36px;
            font-weight: 400;
            font-size: 12px;
            color: #FFFFFF;
            line-height: 23px;
            text-align: center;
            border-radius: 0 10px 0 10px;
            padding: 0 9px;
        }

        .error {
            background: #FF4242;
        }
    }
}
</style>